<template lang="pug">
.view.cp-purchase-price.fix-flex-pos
  //- 查询
  el-form.pe-search(:inline="true")
    el-form-item(label="关键字 : ")
      el-input(v-model="priceOrder", placeholder="物料编码或名称", style="width: 160px")
    el-form-item(label="物料类别 : ")
      el-select(v-model="priceCrsType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsTypeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="供应商 : ")
      el-select(v-model="priceSupply", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in supplySelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="物料属性 : ")
      el-select(v-model="priceCrsProp", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in skuPropSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="状态 : ")
      el-select(v-model="priceStatus", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in statusSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-button(type="primary", @click="searchPrices") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
    el-button(type="primary", @click="addPrice") 新建单价维护
    //- el-form-item
    //-   el-button(type="primary") 导出
  //- 列表
  .pe-table
    el-table(:data="purprices", height="100%", highlight-current-row, size="mini", v-loading="loadingPrices")
      el-table-column(align="center", show-overflow-tooltip, type="index", :index="indexMethod", label="序号", :fixed="true")
      el-table-column(align="center", label="物料编码")
        template(slot-scope="scope")
          el-tooltip(
            effect="dark"
            placement="top"
            :content="scope.row.id")
            div.cell.el-tooltip(style="padding: 0") {{scope.row.id}}
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="名称")
      el-table-column(align="center", show-overflow-tooltip, prop="supply", label="供应商")
        template(slot-scope="scope")
          span {{ scope.row.supply | compare-list(supplySelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="model", label="型号类型")
      el-table-column(align="center", show-overflow-tooltip, prop="unit", label="基本单位")
      el-table-column(align="center", show-overflow-tooltip, prop="crstype", label="物料类别")
        template(slot-scope="scope")
          span {{ scope.row.applicant | compare-list(crsTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="crslevel", label="物料分级")
        template(slot-scope="scope")
          span {{ scope.row.applicant | compare-list(skuLevelSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="price", label="单价")
      el-table-column(align="center", show-overflow-tooltip, prop="currency", label="币种")
      el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
      el-table-column(align="center", label="操作", min-width="96px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewPrice(scope.row)")
          el-tooltip(content="编辑")
            i.icon-act.el-icon-edit(@click="eidtPrice(scope.row, scope.$index)")
          el-tooltip(content="删除")
            i.icon-act.el-icon-delete(@click="deletePrice(scope.row)")
  //- 分页
  el-pagination.pe-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changePricePage",
    :current-page.sync="currentPage",
    :page-size="pageSize",
    :total="purpricesTotal")
  PriceEdit(:visible="showPriceEdit", :formData="formData", @close="showPriceEdit=false", @save="savePrice")
</template>

<script>
import { mapGetters } from 'vuex';
import PriceEdit from '@/components/purchase/price/PriceEdit';
import validate from '@/utils/validate';
import PurData from '@/data/purchase';

const { isEmpty } = validate;

export default {
  name: 'purprice',
  components: {
    PriceEdit
  },
  data() {
    return {
      priceOrder: null,
      priceCrsType: null,
      priceSupply: null,
      priceCrsProp: null,
      priceStatus: null,
      // 表格
      purprices: [],
      purpricesTotal: 1,
      loadingPrices: true,
      currentPage: 1,
      pageSize: 20,
      //
      showPriceEdit: false,
      formData: {
        prices: []
      },
      statusSelectAll: [
        { name: '全部', value: null },
        { name: '启用', value: 0 },
        { name: '禁用', value: 1 }
      ]
    };
  },
  computed: {
    ...mapGetters(['skuPropSelect', 'skuPropSelectAll', 'crsTypeSelect', 'crsTypeSelectAll', 'supplySelect', 'supplySelectAll', 'skuLevelSelect'])
  },
  methods: {
    indexMethod (i) {
      return ((this.currentPage - 1) * this.pageSize) + (i + 1);
    },
    resetSearch () {
      this.priceOrder = null;
      this.priceCrsType = null;
      this.priceSupply = null;
      this.priceCrsProp = null;
      this.priceStatus = null;
      this.$message.success('重置成功');
    },
    makeSearch () {
      const params = {};

      if (!isEmpty(this.priceOrder)) {
        params.order = this.priceOrder;
      }
      if (!isEmpty(this.priceCrsType)) {
        params.crstype = this.priceCrsType;
      }
      if (!isEmpty(this.priceSupply)) {
        params.supply = this.priceSupply;
      }
      if (!isEmpty(this.priceCrsProp)) {
        params.crsprop = this.priceCrsProp;
      }
      if (!isEmpty(this.priceStatus)) {
        params.status = this.priceStatus;
      }

      return params;
    },
    searchPrices () {
      console.log('search');
    },
    // 监听对Price条目操作事件
    addPrice () {
      this.formData = {
        prices: []
      };
      this.showPriceEdit = true;
    },
    viewPrice (row) {
      console.log(row.order);
      // PurApi.getPriceDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      //     this.formData = result.obj;
      //     this.showPriceView = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    eidtPrice (row, index) {
      console.log(row.order, index);
      // this.focusIndex = index;
      // PurApi.getPriceDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      //     this.formData = result.obj;
      //     this.showPriceEdit = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    deletePrice (row, index) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingPrices = true;
        console.log(row.order, index);
        setTimeout(() => {
          this.loadingPrices = false;
        }, 1000);
        // PurApi.deletePrice({ id: row.order }).then((result) => {
        //   if (!result.status) {
        //     this.purprices.splice(index, 1);
        //     this.purpricesTotal = this.purpricesTotal - 1;
        //     this.$message.success('删除成功');
        //   } else {
        //     this.$message.error(`删除失败：${result.comment}`);
        //   }
        //   this.loadingPrices = false;
        // }).catch((error) => {
        //   this.loadingPrices = false;
        //   console.log(JSON.stringify(error));
        // });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    savePrice (formData) {
      console.log(formData);
      // PurApi.savePlan(formData).then((result) => {
      //   if (!result.status) {
      //     this.$message.success('保存成功');
      //     // 说明为新增
      //     if (!formData.order) {
      //       this.purplans.unshift({});
      //       this.$set(this.purplans, 0, result.obj);
      //       this.purplansTotal = this.purplansTotal + 1;
      //     } else {
      //       this.$set(this.purplans, this.focusIndex, result.obj);
      //     }
      //     this.showPlanEdit = false;
      //   } else {
      //     this.$message.error(`保存失败：${result.comment}`);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    // 监听翻页
    changePricePage (currentPage) {
      // const params = this.makeSearch();
      // params.pageNum = currentPage;
      this.loadingPrices = true;
      console.log(currentPage);
      setTimeout(() => {
        this.loadingPrices = false;
      }, 1000);
      // PurApi.getPurchasePrice(params).then((result) => {
      //   if (!result.status) {
      //     this.purprices = result.obj.records;
      //     this.purpricesTotal = result.obj.totalNum;
      //     this.currentPage = currentPage;
      //   }
      //   this.loadingPrices = false;
      // }).catch((error) => {
      //   this.loadingPrices = false;
      //   console.log(JSON.stringify(error));
      // });
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    this.purprices = PurData.priceList;
    this.loadingPrices = false;
    // PurApi.getPurchasePrice().then((result) => {
    //   if (!result.status) {
    //     this.purprices = result.obj.records;
    //     this.purpricesTotal = result.obj.totalNum;
    //   }
    //   this.loadingPrices = false;
    // }).catch((error) => {
    //   this.loadingPrices = false;
    //   console.log(JSON.stringify(error));
    // });
  }
};
</script>

<style lang="sass">
</style>
